<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-15 00:55:09
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-27 15:37:35
-->
<template>
  <div class="self">
    <div class="card">
      <span style="font-weight: 700">修改个人信息</span>
      <div style="margin: 20px auto">
        <el-steps :active="activeNum" align-center>
          <el-step title="输入验证码"></el-step>
          <el-step title="更改个人信息"></el-step>
          <el-step title="保存个人信息"></el-step>
        </el-steps>
      </div>

      <!-- 验证阶段 -->
      <div class="step" v-show="this.activeNum == 1">
        <div>
          <span>本次操作需要验证手机号码请输入xxx收到的手机验证码</span>
        </div>
        <div style="margin: 20px auto">
          <span style="margin-right: 5px">验证码</span>
          <el-input
            style="margin-right: 5px; width: 120px"
            placeholder="请输入验证码"
            v-model="inputCode"
          ></el-input>
          <el-button style="margin-right: 5px" size="small" type="primary"
            >获取验证码</el-button
          >
        </div>
        <div>
          <el-button type="primary" style="width: 120px" @click="toStep2()"
            >下一步</el-button
          >
        </div>
      </div>
      
      <!-- 修改阶段 -->
      <div class="step" v-show="this.activeNum == 2">
        <el-card>
          <el-form class="form" :model="form" label-width="80px"  :label-position="'right'">
            <el-form-item label="账号">
              {{form.account}}
            </el-form-item>
            <el-form-item label="密码">
               <el-input type="password" v-model="form.account_password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
               <el-input type="password" v-model="account_password2"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="form.id_card_number"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="地区">
              <el-cascader
              size="large"
              :options="region"
              v-model="selectedOptions"
              v-if="isShowAddressInfo"
            >
            </el-cascader>
            </el-form-item>
            <el-form-item label="头像">
              <div class="upload-wrapper">
                <div class="image" v-if="imageUrl">
                  <img v-lazy="imageUrl" class="avatar"/>
                  <div class="shade">
                    <i class="el-icon-delete" @click="deleteSelfProfile"></i>
                  </div>
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :http-request="httpRequestFn"
                  :limit="1"
                  v-else
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="tips">
                  <div class="text">支持的图片格式：.jpg</div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group>
                <el-radio v-model="form.sex" label="男">男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="save">保存</el-button>
        </el-card>
      </div>

      <!-- 修改成功 -->
      <div class="step" v-show="this.activeNum == 3">
        <el-result icon="success" title="修改成功！"></el-result>
      </div>
    </div>
  </div>
</template>

<script>
import { AreaData, AreaCodeToText, AreaTextToCode, upLoadPicture } from '@/utils/utils'
export default {
  data() {
    return {
      inputCode: "",
      activeNum: 1,
      account_password2: '',//确认密码
      form: {
        id: 1,
        account_id: 1,
        self_profile: null,
        name: "喜某某",
        id_card_number: "123456789012345678",
        phone: "12345678910",
        area: "广东省/广州市/天河区",
        account: 12345678912,
        account_password: null,

        sex: '男'
      },
      imageUrl: "",
      pictureList: [],
      
      region: AreaData(),
      selectedOptions: [],
      isShowAddressInfo:true,
    };
  },
  methods: {
    deleteSelfProfile() {
      this.imageUrl = ''
    },
    // 保存修改
    save() {
      //简单校验 待修改
      if (this.form.account_password != this.account_password2) {
        this.$message.error('密码不一致')
        return
      }

      let p1 = this.$API.modifyLoginAccount({
        "account": this.form.account,
        "account_password": this.form.account_password
      },this.form.account_id).then(res => {
        if (res.status == 200) {
          this.$message.success('账号保存成功')
        }
      })
      let p2 = this.$API.modifyPurchaser({
        "account_id": this.form.account_id,
        "self_profile": this.imageUrl,
        "name": this.form.name,
        "id_card_number": this.form.id_card_number,
        "phone": this.form.phone,
        "area": AreaCodeToText(this.selectedOptions)
      }, this.form.id).then(res => {
        if (res.status == 200) {
          this.$message.success('买家保存成功')
        }
      })
      Promise.all([p1, p2]).then((result) => {
        this.activeNum = 3
      }).catch((error) => {
        console.log(error)
      })
    },
    toStep2() {
      this.activeNum = 2;
      this.load()
    },
    toStep3() {
      this.activeNum = 3;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 自定义上传函数 
    // http-request属性的回调函数有一个默认的参数,content 是一个对象,这个形参不用传实参
    httpRequestFn(res) {
      upLoadPicture(res, url => {
        this.imageUrl = url
      })
    },
    async load() {
      await this.$API.getPurchaser().then(res => {
        if (res.status == 200) {
          let aid = this.$store.state.params.aid
          for (let obj of res.data) {
            if (obj.account_id == aid) {
              this.form = obj
              this.selectedOptions = AreaTextToCode(obj.area)
              if (obj.self_profile) this.imageUrl = obj.self_profile
              return this.$API.getOneLoginAccount(obj.account_id)    
            }
          }
          Promise.reject()
        }
      }).then(res => {
        if (res.status == 200) {
          this.account_password2 = res.data.account_password
          this.form = {...res.data, ...this.form}
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  created() {
  }
};
</script>

<style lang="less" scoped>
.self{
  /deep/ .el-form-item__content{
    padding-left: 30px;
    text-align: left;
  }
  .step {
    margin: 120px auto;
    text-align: center;
    font-weight: 700;
  }
  .form{
    width: 500px;
    margin: 0 auto;
  }
  .upload-wrapper{
    display: flex;
    .image{
      width: 100px;
      height: 100px;
      position: relative;
      img{
        width: 100%;
      }
      &:hover .shade{
        display: flex;
      }
      .shade{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: rgba(0,0,0,0.5);
        z-index: 2;
        i{
          font-size: 30px;
          color: #E6A23c;
        }
        display: none;
      }
    }
    .tips{
      margin-left: 30px;
      display: flex;
      flex-direction: column-reverse;
      color: @color-tips;
    }
    .avatar-uploader {
      width: 100px;
      height: 100px;
      /deep/ .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #3264a9;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
    }
  }
}
</style>